<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.ort">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<style>
    .layui-upload-img{
        border: 1px solid #1E9FFF;
      
        height: 100px;
    
    }
    table tr td{
    	text-align: center;
    	font-size: 15px;
        color: #000;
       
    }
  

</style>
<body>       

<div class="layui-panel" style="padding: 8px;">
	
    <fieldset class="layui-elem-field layui-border-blue" style="padding-top: 8px;">
        <legend class="layui-form-label">商品上架</legend>
    <form  class="layui-form layui-form-pane" style="margin: 20px;padding-top: 20px;">
            <div  class="layui-form-item">
                <label  class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                   <input type="hidden" name="id" th:value="${goods.id}">
                    <input type="text"  name="name" lay-verify="required" autocomplete="off" th:value="${goods.name}" placeholder="商品名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品编号</label>
                <div class="layui-input-block">
                    <input type="text" name="number" th:value="${goods.number}" readonly="readonly"  lay-verify="required|number" autocomplete="off" placeholder="请输入编号,若不输入随机生产" class="layui-input layui-bg-cyan">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">市场价格</label>
                <div class="layui-input-inline" style="width: 50%;">
                    <input type="text" name="marketPrice" th:value="${goods.marketPrice}" lay-verify="required|marketPrice" autocomplete="off" placeholder="0.00" class="layui-input">
             
                </div>
                <div class="layui-input-inline">
                 <a class="layui-btn">元</a>
              
                </div>
               
            </div>
               <div class="layui-form-item">
                <label class="layui-form-label">是否新品</label>
                <div class="layui-input-block">
                    <input type="radio" name="newProducts" value="0" title="新品" th:checked=${goods.newProducts==0} >
                    <input type="radio" name="newProducts"  value="1" title="非新品" th:checked=${goods.newProducts==1}>
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">是否热卖</label>
                <div class="layui-input-block">
                    <input type="radio" name="heatBuy" value="0" title="热品" th:checked=${goods.heatBuy==0}>
                    <input type="radio" name="heatBuy"  value="1" title="非热品" th:checked=${goods.heatBuy==1}>
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">是否在售</label>
                <div class="layui-input-block">
                    <input type="radio" name="status"  value="0" title="在售" th:checked=${goods.status==0}>
                    <input type="radio" name="status"  value="1" title="非在售" th:checked=${goods.status==1}>
                </div>
            </div>
            
              <div class="layui-form-item">
                <label class="layui-form-label">商品图片</label>
                <div class="layui-upload" style="padding-left: 140px;">
                    <button type="button" class="layui-btn" id="test2">点击上传</button>
                    <input type="hidden" name="photo">
                   <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                         预览图：
                     <div class="layui-upload-list layui-upload-img" id="demo2" style="height: 100px;">
                         <input type="hidden" class="photos" th:value="${goods.photos[0]}">
                         <img th:if="${goods.photos[0]} ne '0'" th:src="@{/file/fc/showImgTo/(id=${goods.photos[0]})}" style="height: 100px">

                     </div>


                   </blockquote>
                </div>
            </div>
            
              <div class="layui-form-item">
                <label class="layui-form-label">轮播图片</label>
                <div class="layui-upload" style="padding-left: 140px;">
                    <input type="hidden" name="carouselPhoto">
                    <button type="button" class="layui-btn" id="test3">点击上传</button> 
                   <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;" th:each="i:${goods.carouselPhotos}">
                                         预览图：
                     <div class="layui-upload-list" id="demo3" style="height: 100px;"  >
                         <input type="hidden" class="carouselPhotos" th:value="${i}">
                         <img th:if="${goods.carouselPhotos[0]} ne '0'" th:src="@{/file/fc/showImgTo/(id=${i})}" style="height: 100px">
                     </div>
                   </blockquote>
                </div>
            </div>
           
              <div class="layui-form-item">
                <label class="layui-form-label">商品单位</label>
                <div class="layui-input-inline">
                    <input type="text" th:value="${goods.unit}" name="unit" lay-verify="required|unit" autocomplete="off" placeholder="单位/个" class="layui-input">
                </div>

            </div>
             
             <div class="layui-form-item">
                <label class="layui-form-label">关键字</label>
                <div class="layui-input-block">
              <span id="span" th:each="t:${goods.keywords}">
                  <div style="float: left; margin-left: 10px;">
             	<input  style="float: left;width: 90px;"  name="keyword" type="text" th:value="${t}" lay-verify="required"  class="layui-input keyword">
             	<a  style="width: 60px;float: left;margin-left: 10px;margin-top: 10px;">

             		   <i  class="layui-icon layui-icon-delete" onclick="delect(this)">
             		   </i>
             	      </a>
             </div>
              </span>
              <div id="" class="layui-input-inline" style="left: 30px;">
              
              <a class="layui-btn" id="add"><i class="layui-icon layui-icon-add-1" ></i>添加</a> 
              </div>
             </div>
                         
                
            </div>
            
             <div class="layui-form-item">
                <label class="layui-form-label">所属类别</label>
                <div class="layui-inline" style="width: 235px;">
                    <div>
                        <input type="hidden" th:value="${goods.categories}" id="categories" name="categories">
                        <input type="text" id="type" th:value="${c.title}" class="layui-input" autocomplete="off" name="" placeholder="请选择类别">
                    </div>
                 </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">所属名牌</label>
                <div class="layui-inline" style="width: 235px;">
                    <div>
                        <input type="hidden" th:value="${goods.brandOwner}" id="brandOwner" name="brandOwner">
                        <input  th:value="${b.title}" placeholder="请选择品牌" autocomplete="off" class="layui-input" id="brand">
                        <div id="test13" style="display: none"  class="demo-tree-more"></div>
                    </div>
                 </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">所属名牌</label>
                    <div class="layui-inline" style="width: 235px;" >


                    </div>
                </div>
            </div>
             <div class="layui-form-item">
                <label class="layui-form-label">商品简介</label>
                <div class="layui-input-block">
                    <input type="text" th:value="${goods.introduction}" name="introduction" id="introduction" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            
              <div class="layui-form-item">
                <label class="layui-form-label" style="width: 120px;">商品详情简介</label>
                <div class="layui-input-block" style="left: 10px;">
                    <textarea lay-verify="content"  th:text="${goods.content}" class="layui-textarea" id="content" name="content" style="display: none"></textarea>
                </div>
            </div>
     <fieldset class="layui-elem-field layui-border-blue" >
             <label style="font-size: 25px;">商品规格</label>

             <div class="layui-form-item">
             	<div class="layui-input-inline" style="margin: 10px  0 0 10px;">
             	    <a id="twoBtn" class="layui-btn layui-bg-gray" style="margin-left: -6px;">规格</a>
             	</div> 
             	<div class="layui-inline">
             	   <a id="guige2" class="layui-btn layui-bg-blue" style="float: right;margin: 10px  0 0 10px;">添加</a>
             	</div>
             </div>
         <input type="hidden" id="specifications" th:value="${goods.specification}">
         <input name="specification" type="hidden">


            <div id="TableTwo">
             <table  border="1" frame="above" id="twoTable" lay-filter="twoTable"></table>
            </div>
     </fieldset> 
      <fieldset class="layui-elem-field layui-border-blue">
  <input type="hidden" id="inventory" th:value="${goods.inventory}">
      	<label style="font-size: 25px;">货物库存</label>
            <div style="width: 80%;">
           <table  id="numTable" lay-filter="numTable"></table> 
            </div>	     
    </fieldset> 
        <div  style="text-align: center;">
            	<a class="layui-btn" id="submitGoods" lay-submit="" lay-filter="submitGoods">提交</a>
        </div>
           </form>
    </fieldset>  
 
</div>

<div id="numEdit" style="display: none;">
	<a class="layui-btn layui-bg-blue" lay-event="edit">编辑</a>
</div>
<div id="tool" style="display: none">
    <a class="layui-btn" lay-event="delete">
        删除
        <i class="layui-icon layui-icon-delete"></i>
    </a>
</div>

<!--        库存信息-->
<div id="kuCun" style="display: none;">

    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-inline">
            <input class="layui-input" lay-verify="required|num"  autocomplete="off" id="price"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">数量</label>
        <div class="layui-input-inline">
            <input class="layui-input" lay-verify="required|num"  autocomplete="off" id="num"/>
        </div>
    </div>

</div>
   <div id="addGG" style="display: none;">
   	   <div class="layui-form-item">
   	   	  <label class="layui-form-label">规格名</label>
   	   	  <div class="layui-input-inline">
   	   	  	 <input class="layui-input" id="name1"  name="name1"/>
   	   	  </div>
   	   </div>
   	   <div class="layui-form-item">
   	   	  <label class="layui-form-label">规格值</label>
   	   	  <div class="layui-input-inline">
   	   	  	 <input class="layui-input" id="v" name="v"/>
   	   	  </div>
   	   </div>
   </div>
</div>


<script>
	var $;
    var i;
    var da = [];
    var dad = {"k":"标准","v":"标准"};
    //removeByValue(arr, 'age', '15')删除datas
    var photos = [];
    var carouselPhotos = [];
     var keyword = [];
	var datas = [];

    layui.config({
        base:'../../../js/'
    })
	layui.use(['form','upload','jquery','dropdown','layedit','table','element','tree'],function(){
		var upload = layui.upload,dropdown = layui.dropdown,table = layui.table,form=layui.form,tree = layui.tree;
		elem = layui.element;
		$ = layui.jquery;
		
		i=0;
        tableData();

     //选择品牌
        $('#brand').on('click',function (){
            var data = [];
            $.ajax({
                type:'get',
                url:'/brand/bc/find',
                dataType:'json',
                success:function (res){
                    $.each(res.data,function (i,d){
                        data.push(d);
                    })
                    console.log(data)
                    dropdown.render({
                        elem: '#brand'
                        ,data: data
                        ,click: function(obj){
                            this.elem.val(obj.title);
                            $('#brandOwner').val(obj.id);

                        }
                        ,style: 'width: 235px;'
                    });
                }
            })


        })


        //富文本
          var layedit = layui.layedit;
        var index = layedit.build('content');
        form.verify({
            content: function(value) {
                return layedit.sync(index);
            }
        });
       //给俩个表格添加数据
  function tableData(){
      var specifications= $('#specifications').val();
      var s= JSON.parse(specifications);
      $.each(s,function (i,e){
          da.push(e);
      })


      var inventory= $('#inventory').val();
      var inventory= JSON.parse(inventory);
      console.log(inventory[0])
      datas.push(inventory[0]);
      table.render({
          elem:'#numTable',
          data: datas,
          cols:[
              [
                  {field:'type',align:'center',title:'货物规格',templet:function(obj){

                          if(obj.type=="标准"){
                              return "标准";
                          }
                          else  {
                              var dat = obj.type;
                              var name ="";

                              $.each(dat,function(i,d){
                                  name+='<a class="layui-btn">'+d.v+'</a>';
                              })
                              return name;
                          }

                      }},
                  {field:'price',title:'货物售价',width:100},
                  {field:'num',title:'货品数量',width:100},
                  {fixed:'right',title:'操作',width:100,toolbar:'#numEdit'},

              ]
          ],

      })
      table.render({
          elem:'#twoTable',
          data: da,
          cols:[
              [

                  {field:'k',align:'center',title:'规格名'},
                  {field:'v',title:'规格值'},

                  {fixed:'right',title:'操作',width:100,toolbar:'#tool'},

              ]
          ],

      })
  }
        table.on('tool(twoTable)',function (obj){
            var event = obj.event;
            var  dataForm = obj.data;
            console.log(da)
            //removeByValue(arr, 'age', '15')删除da
            if ('delete'==event){
                index = 0;
                for (var i=0;i<da.length;i++){
                    if(da[i].id==dataForm.id){
                        index=i;
                    }
                }

                da.splice(index,1);
                table.reload('twoTable')
                datas[0].type =da==""?"标准":da;
                table.reload('numTable')
            }

        })
        //监听编辑库存信息
        table.on('tool(numTable)',function (obj){
            var event = obj.event;
            if (event=='edit') {

                $('#price').val('');
                $('#num').val('');
                layer.open({
                    type: 1,
                    content: $('#kuCun'),
                    area: ['500px', '500px'],
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        datas[0].price = $('#price').val();
                        datas[0].num = $('#num').val();
                        table.reload('numTable', {
                            data: datas
                        })
                        layer.close(index);
                    }, end: function (index) {

                    }
                })
            }
        })
  
  	upload.render({
    elem: '#test2'
    ,url: '/file/fc/fileUpload' //此处配置你自己的上传接口即可
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
          elem.progress('photoProgress','0%');
      });
    }
    ,done: function(res){
      //上传完毕
            if(!res.is){
                layer.alert('上传失败，请稍后再试......')
            }else{
                $('#demo2').append('<input type="hidden" class="photos" value="'+res.file.id+'">')
                 photos.push(res.file.id);
            }
    }
  });
  	upload.render({
    elem: '#test3'
    ,url: '/file/fc/fileUpload' //此处配置你自己的上传接口即可
    ,multiple: true
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo3').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')

          elem.progress('photoProgress','0%');
      });
    }
    ,done: function(res){
      //上传完毕
            if(!res.is){
                layer.alert('上传失败，请稍后再试......')
            }else{
                $('#demo3').append('<input type="hidden" class="carouselPhotos" value="'+res.file.id+'">')
                carouselPhotos.push(res.file.id);
            }
    }
  });
  //下拉选择

  form.on('submit(submitGoods)',function (obj){
      keyword = [];
      $('.keyword').each(function (i,e){
           keyword.push($(this).val())
      });
      photos=[];
      $('.photos').each(function (i,e){
          photos.push($(this).val())
      });
      carouselPhotos=[];
      $('.carouselPhotos').each(function (i,e){
          carouselPhotos.push($(this).val())
      });

      if (keyword!="")
      obj.field.keyword = JSON.stringify(keyword);
      if (photos!="")
      obj.field.photo = JSON.stringify(photos);
      if (carouselPhotos!="")
      obj.field.carouselPhoto = JSON.stringify(carouselPhotos);
      if (da == ""){
          obj.field.specification = JSON.stringify(dad);
      }else {
          obj.field.specification = JSON.stringify(da);
      }
      obj.field.inventory = JSON.stringify(datas);


      var dataForm = obj .field;

      console.log(dataForm)
      $.ajax({
          type:'post',
          url:'/goods/gc/updata',
          dataType:'json',
          data:dataForm,
          success:function (res){
            layer.msg(res.msg)
              let index = parent.layer.getFrameIndex(window.name);
              parent.layer.close(index);//关闭父页面窗口
              parent.layui.table.reload('goodsTable');
          }


      })


  })

        $('#type').on('click',function (){
            $.ajax({
                type:'get',
                url:'/category/cc/tree',
                dataType:'json',
                success:function (res){

                    $('#test12').show();
                    tree.render({
                        elem: '#test12'
                        ,data: res
                        ,showLine: false  //是否开启连接线

                        ,click: function(obj){

                            $('#categories').val(obj.data.id)
                            $('#type').val(obj.data.title)

                        }
                    });

                }
            })

        })




    $('#guige2').on('click',function(){
    	$('#name1').val('');
    	 $('#v').val('');

    	layer.open({
    		type:1,
    		content:$('#addGG'),
    		area:['500px','500px'],
    		btn:['确定','取消'],
    		btn1:function(index){
    			var id = i++;
    			var k = $('#name1').val();
    			var v =  $('#v').val();
    		var dat = {"id":id,"k":k,"v":v};
    			da.push(dat)

    			layer.close(index)
    			   table.reload('twoTable', {
              data: da,
             });
                datas[0].type=da;
             table.reload('numTable',{
             	data:datas
             })
    		},end:function(index){

    		}
    	})
    })


//关键字添加
	$('#add').on('click',function(){
		var li = ' <div style="float: left; margin-left: 10px;">'+
             	'<input  style="float: left;width: 90px;"  name="keyword" type="text" value="" lay-verify="required"  class="layui-input keyword">'+
             	'<a  style="width: 60px;float: left;margin-left: 10px;margin-top: 10px;">'+
             		
             		   '<i  class="layui-icon layui-icon-delete" onclick="delect(this)">'+
             		   '</i>'+
             	      '</a>'+
             '</div>';
		$('#span').append(li)

	})
	

		//
     // $('#twoBtn').on('click',function(that){
     //
     //   $('#fitstBtn').removeClass('layui-bg-black');
     //
     // 	$('#fitstBtn').addClass('layui-bg-gray');
     // 	$('#twoBtn').removeClass('layui-bg-gray');
     // 	$('#firstTable').hide()
     // 	$('#TableTwo').show();
     // 	$('#guige2').show()
     //
     //
     // })
     //   $('#fitstBtn').on('click',function(that){
     //
     //   $('#fitstBtn').removeClass('layui-bg-gray');
     //
     // 	$('#twoBtn').addClass('layui-bg-gray');
     // 	$('#TableTwo').hide();
     // 	$('#firstTable').show()
     // 	 	$('#guige2').hide()
     //    datas[0].price = 30;
     //
     //    datas[0].num = 50;
     //     table.reload('twoTable', {
     //      data: datas,
     //  });
     // })
 
})

function delect(that){
	$(that).parent().parent().remove()
}

function submitBtn(){

       $('#submitGoods').click();
}
</script>


</body>
</html>